<template>
<div class="historyGrab">
  <div class="grab-hd">
    <nav-bar title="历史抢单" isBg='0'>
      <span class="kefu" @click="$router.push({'path': '/customer/server'})">在线客服</span>
    </nav-bar>
    <div class="state-box">
      <span class="state">订单已完成</span>
      <span class="info">若其他任何疑问或问题，请联系客服</span>
    </div>
  </div>
  <div class="content">
    <div class="order-info">
      <div class="title bd-b">订单信息</div>
      <div class="list">
        <div class="info-list">
          <span class="name">订单号</span>
          <div class="info">
            <span>Z622722936424644608</span>
            <span class="n copy">复制</span>
          </div>
        </div>
        <div class="info-list">
          <span class="name">交易数量</span>
          <div class="info">
            <span>5,000.28</span>
            <span class="n">ORG</span>
          </div>
        </div>
        <div class="info-list">
          <span class="name">手续费</span>
          <div class="info">
            <span>-5.05</span>
            <span class="n">ORG</span>
          </div>
        </div>
      </div>
    </div>
    <div class="order-info">
      <div class="title bd-b">收款信息</div>
      <div class="list">
        <div class="info-list">
          <span class="name">所属银行</span>
          <div class="info">
            <span>中国工商银行 宝安支行</span>
            <span class="n copy">复制</span>
          </div>
        </div>
        <div class="info-list">
          <span class="name">银行卡号</span>
          <div class="info">
            <span>6217 9999 3001 4545 188</span>
            <span class="n copy">复制</span>
          </div>
        </div>
        <div class="info-list">
          <span class="name">姓名</span>
          <div class="info">
            <span>李云龙</span>
            <span class="n copy">复制</span>
          </div>
        </div>
        <div class="info-list">
          <span class="name">联系方式</span>
          <div class="info">
            <span>13500008888</span>
            <span class="n copy">复制</span>
          </div>
        </div>
        <div class="info-list">
          <span class="name">联系方式</span>
          <div class="info">
            <span class="amount">￥5,000.28</span>
            <span class="tis">请严格按照订单金额支付</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  name: 'historyGrabDetails',
  data() {
    return {
      isLoading: false
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 500);
    }
  }
};
</script>
<style lang="less" scoped>
.historyGrab{
  .grab-hd{
    background-color: #2C64EF;
    .kefu{
      color: #fff;
      font-size: 30px;
    }
    .state-box{
      padding:34px 44px;
      .state{
        display: block;
        color: #fff;
        font-size: 48px;
      }
      .info{
        font-size: 24px;
        color: #fff;
        display: block;
        padding-top: 10px;
      }
    }
  }
  .order-info{
    margin-top:20px;
    background-color: #fff;
    padding: 10px 20px;
    .list{
      padding: 14px 0;
    }
    .title{
      margin-right: 100px;
      font-size: 30px;
      padding: 20px 0;
    }
    .info-list{
      padding: 14px 0;
      display: flex;
      justify-content: space-between;
      .name{
        font-size: 24px;
        color: #333;
      }
      .amount{
        color: #2C64EF;
        font-size: 42px;
        text-align: right;
        display: block;
      }
      .tis{
        font-size: 22px;
        color: #ED0000;
        display: block;
      }
      .n{
        font-size: 24px;
        padding:0 10px 0 40px;
      }
      .copy{
        color: #2C64EF;
      }
    }
  }
}
</style>
